/**
* @description: 计划工单 ==> 计划工单领取页面
* @author: JiWei
* @date:
**/
<template>
  <view class="patrol-task">
    <nav-bar class="header" :background="backgroundColor" back :title="title" @goBack="goBack"/>
    <!-- 搜索框  -->
    <view class="patrol-search">
      <van-search disabled show-action v-model="searchValue" 
        left-icon="" action-text="重置" 
        right-icon="search" placeholder="请输入站点名称" 
        @click="showSearch=true" @cancel="onSearch('')" />
    </view>
    <view class="patrol-main" v-if="taskList.length > 0">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <!-- 列表循环   -->
        <van-list
            v-model="isLoading"
            :finished="finished"
            finished-text="没有更多了"
            @load="loadMore"
        >
          <view class="patrol-list" v-for="(item,index) in taskList" :key="index">
            <view class="patrol-title">
              <img src="../../../../static/img/light.png" alt="">
              <text class="partrol-main-title">{{ item.name }}</text>
              <van-button type="info" class="patrol-btn" @click="toReceive(item)">领取</van-button>
            </view>
            <hr class="patrol-hr">
            <view class="top-patrol-main">
              <text class="patrol-big-ltitle">巡视站点:</text>
              <text class="patrol-small-ltitle">{{ item.taskSiteName }}</text>
            </view>
            <view class="top-patrol-main">
              <text class="patrol-big-rtitle">负责人：</text>
              <text class="patrol-small-rtitle">{{ item.tourOperName }}</text>
            </view>
            <view class="top-patrol-main">
              <text class="patrol-big-ltitle">计划开工时间:</text>
              <text class="patrol-small-ltitle">{{ item.planStartTime }} ～ {{item.planEndTime}}</text>
            </view>
          </view>
        </van-list>
      </van-pull-refresh>
    </view>
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search-equ-match @cancel="showSearch = false;" @search="onSearch" :empty="showSearch"/>
    </van-popup>
  </view>
</template>
<script>
import navBar from '../../../../components/common/nav-bar'
import searchEquMatch from '../../../common/searchEquMatch'
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
  name: 'patrolReceive',
  components: { navBar, searchEquMatch },
  props: {},
  data() {
    return {
      backgroundColor:'#417ADC',
      title:'计划工单领取',
      showSearch: false, // 是否显示搜索弹窗
      searchValue:'',
      taskList:[],
      refreshing:false, // 是否正在刷新
      isLoading: false,
      listParams: {
        name: '',
        limit: 20,
        page: 1
      },
      total:0,
      finished: false,
    };
  },
  computed: {
    ...mapGetters(['userData'])
  },
  watch: {},
  mounted() {
    this.getReceiveTaskListP();

  },
  methods: {
    // 获取列表
    getReceiveTaskListP() {
      let params = {
        ...this.listParams,
        ...this.userData
      }
      this.$api.getReceiveTaskList(params).then(res => {
        this.isLoading = false;
        this.refreshing = false;
        this.taskList = this.taskList.concat(res.data.list.map(item => {
          return{
            planStartTime:item.planStartTim ? moment(item.planStartTim).format('YYYY-MM-DD HH:mm') :null,
            planEndTime: item.planEndTim ? moment(item.planEndTim).format('YYYY-MM-DD HH:mm') : null,
            ...item
          }
        }));
        this.total = +res.data.total;
      })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.listParams.page = 1;
      this.taskList = [];
      this.getReceiveTaskListP();
    },
    loadMore() {
      console.log("loadmore")
      if (this.total > this.taskList.length) {
        this.listParams.page = this.listParams.page + 1;
        this.getReceiveTaskListP();
      }else {
        this.finished = true;
      }
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.listParams.name = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    // 领取按钮
    toReceive(item) {
      let name = item.name
      let taskSiteName = item.taskSiteName
      let planStartTim = item.planStartTime?item.planStartTime:''
      let planEndTim = item.planEndTime?item.planEndTime:''
      let arr = []
      item.detailtypes.forEach(e => {
        if (e.CODE_KEY=='0'){
          arr.push(0)
        } else {
          arr.push(1)
        }
      });
      // 跳转到 工单分配
      uni.navigateTo({
        url: `/pages/workBench/tourTask/getTourTask/taskAssignment?name=${name}&taskSiteName=${taskSiteName}&planStartTim=${planStartTim}&planEndTim=${planEndTim}&id=${item.objId}&display=${arr.join('-')}`
      })
      this.onRefresh()
    }
  }
};
</script>
<style scoped lang="scss">
.patrol-task {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .patrol-search {
    width: px2vw(1020);
    height: 38px;
    margin: px2vw(30) px2vh(30);
    .van-search {
      padding: 0 0;
      height: 38px;
    }
    .van-search__content {
      background: #fff;
      height: 38px;
    }
    /deep/.van-field__control {
      height: 30px;
    }
  }
  .patrol-main {
    height: calc(100vh - #{px2vh(230)} - 38px);
    overflow: auto;
    .patrol-list {
      width: px2vw(1020);
      min-height: px2vh(340);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      margin: 0  px2vw(30) px2vh(30) px2vw(30) ;
      padding-bottom: px2vw(30);
      .patrol-title {
        width: px2vw(940);
        height: px2vh(80);
        margin-left: px2vw(40);
        padding-top: px2vw(30);
        margin-bottom: px2vh(30);
        img {
          width: px2vw(64);
          height: px2vw(64);
          margin-top: px2vh(6);
          float: left;
        }
        .partrol-main-title {
          margin-left: px2vw(20);
          width: calc(#{px2vw(940)} - #{px2vw(64)} - #{px2vw(220)});
          margin-top: px2vh(8);
          font-size: px2vh(48);
          float: left;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .patrol-btn {
          width: px2vw(200);
          height: px2vh(80);
          background: #417ADC;
          float: right;
          border-radius: px2vw(40) px2vh(40);
        }
      }
      .patrol-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
        margin-bottom: px2vh(42);
      }
      .top-patrol-main {
        width: px2vw(900);
        font-size: px2vh(36);
        line-height: px2vh(62);
        margin-left: px2vw(60);
        .patrol-big-ltitle,.patrol-big-rtitle {
          color: #666;
        }
        .patrol-small-ltitle,.patrol-small-rtitle {
          margin-left: px2vw(25);
          color: #333;
        }
        .patrol-big-rtitle {
          // margin-left: px2vw(245);
        }
      }
    }
  }

}
</style>